<template>
  <div style="background-color: var(--el-bg-color)">
    <el-tabs v-model="activPage" style="padding: 10px">
      <el-tab-pane label="审批消息" name="processList">
        <div class="table-box">
          <KingTable ref="leftKingTable" :tableOptions="_leftTableOptions">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
              <el-button style="margin-left: 12px" type="primary" @click="handleLeftRead(scope.selectedListIds)">
                标志已读
              </el-button>
              <el-button style="margin-left: 12px" type="primary" @click="handleLeftDeal(scope.selectedListIds)">
                标志已处理
              </el-button>
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
              <el-button size="small" type="primary" @click="onHandleToRoute(scope.row)"> 处理 </el-button>
              <el-button size="small" type="primary" @click="handleLeftBtnAction(operateType.ADD, scope.row)"> 查看 </el-button>
            </template>
          </KingTable>
        </div>
        <detail ref="leftDetail" />
      </el-tab-pane>
      <el-tab-pane label="预警消息" name="warnList">
        <div class="table-box">
          <KingTable ref="rightKingTable" :tableOptions="_rightTableOptions">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
              <el-button style="margin-left: 12px" type="primary" @click="handleRightRead(scope.selectedListIds)">
                标志已读
              </el-button>
              <el-button style="margin-left: 12px" type="primary" @click="handleRightDeal(scope.selectedListIds)">
                标志已处理
              </el-button>
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
              <el-button size="small" type="primary" @click="handleRightBtnAction(operateType.ADD, scope.row)"> 查看 </el-button>
            </template>
          </KingTable>
        </div>
        <detail ref="rightDetail" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="tsx" name="MessageList">
import { ref, reactive } from "vue";
import KingTable from "@/components/KingTable/index.vue";
import { operateType } from "@/plugins/commonType.enum";
import { failMsg, confirm, succMsg } from "@/utils/MessageUtils";
import { postRequest } from "@/api/mains";
import Detail from "./components/messageDetail.vue";
import { useRouter } from "vue-router";

const router = useRouter();

const activPage = ref("processList");

const leftDetail = ref();
const rightDetail = ref();

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const leftKingTable = ref();
const rightKingTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _leftInitParam = reactive({ EQ_ss: 1, EQ_msgtype: "1", sorts: "sendtime@desc" });
const _rightInitParam = reactive({ EQ_ss: 1, EQ_msgtype: "3", sorts: "sendtime@desc" });

// 表格配置项
const _leftTableCols = [
  { type: "selection", fixed: "left", align: "center", width: 60 },
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "title",
    label: "标题",
    overflow: true,
    width: 180
  },
  {
    prop: "sendername",
    label: "发送人",
    overflow: true,
    width: 120
  },
  {
    prop: "sendtime",
    label: "发送时间",
    overflow: true,
    width: 160
  },
  {
    prop: "receivername",
    label: "接收人",
    overflow: true,
    width: 120
  },
  {
    prop: "receivetime",
    label: "接收时间",
    overflow: true,
    width: 160
  },
  {
    prop: "dealresult",
    label: "处理结果",
    overflow: true,
    width: 120
  },
  {
    prop: "dealtime",
    label: "处理时间",
    overflow: true,
    width: 160
  },
  {
    prop: "isdeal",
    label: "是否处理",
    overflow: true,
    dictCode: "DealType",
    width: 120
  },
  {
    prop: "isnew",
    label: "是否已读",
    overflow: true,
    dictCode: "ReadType",
    width: 120
  },
  { prop: "operation", label: "操作", fixed: "right", width: 130 }
];

// 表格配置项
const _rightTableCols = [
  {
    prop: "title",
    label: "标题",
    overflow: true,
    width: 180
  },
  {
    prop: "sendername",
    label: "发送人",
    overflow: true,
    width: 120
  },
  {
    prop: "sendtime",
    label: "发送时间",
    overflow: true,
    width: 160
  },
  {
    prop: "receivername",
    label: "接收人",
    overflow: true,
    width: 120
  },
  {
    prop: "receivetime",
    label: "接收时间",
    overflow: true,
    width: 160
  },
  {
    prop: "dealresult",
    label: "处理结果",
    overflow: true,
    width: 120
  },
  {
    prop: "dealtime",
    label: "处理时间",
    overflow: true,
    width: 160
  },
  {
    prop: "isdeal",
    label: "是否处理",
    overflow: true,
    dictCode: "DealType",
    width: 120
  },
  {
    prop: "isnew",
    label: "是否已读",
    overflow: true,
    dictCode: "ReadType",
    width: 120
  },
  { prop: "operation", label: "操作", fixed: "right", width: 130 }
];

//搜索栏配置
const _leftSearchCols = [
  {
    prop: "LIKE_title",
    label: "标题",
    width: 100,
    el: "input",
    showLabel: false
  },
  {
    prop: "LIKE_sendername",
    label: "发送人",
    width: 100,
    el: "input",
    showLabel: false
  },
  {
    prop: "EQ_isdeal",
    label: "是否处理",
    width: 100,
    el: "select",
    showLabel: false,
    dictCode: "DealType",
    placeholder: "请选择处理状态"
  },
  {
    prop: "EQ_isnew",
    label: "是否已读",
    width: 100,
    el: "select",
    showLabel: false,
    dictCode: "ReadType",
    placeholder: "请选择已读状态"
  }
];

//搜索栏配置
const _rightSearchCols = [
  {
    prop: "LIKE_title",
    label: "标题",
    width: 100,
    el: "input",
    showLabel: false
  },
  {
    prop: "LIKE_sendername",
    label: "发送人",
    width: 100,
    el: "input",
    showLabel: false
  },
  {
    prop: "EQ_isdeal",
    label: "是否处理",
    width: 100,
    el: "select",
    showLabel: false,
    dictCode: "DealType",
    placeholder: "请选择处理状态"
  },
  {
    prop: "EQ_isnew",
    label: "是否已读",
    width: 100,
    el: "select",
    showLabel: false,
    dictCode: "ReadType",
    placeholder: "请选择已读状态"
  }
];

const _leftTableOptions = {
  title: "消息中心",
  showReset: false,
  queryUrl: "system/message/query",
  operUrl: "system/message",
  tableColumns: _leftTableCols,
  searchColumns: _leftSearchCols,
  initParam: _leftInitParam
};

const _rightTableOptions = {
  title: "消息中心",
  showReset: false,
  queryUrl: "system/message/query",
  operUrl: "system/message",
  tableColumns: _rightTableCols,
  searchColumns: _rightSearchCols,
  initParam: _rightInitParam
};

// 重新拉取表格数据
const fetchLeftTableData = () => {
  leftKingTable.value?.getTableList();
};

const fetchRightTableData = () => {
  rightKingTable.value?.getTableList();
};

/**
 * 增删查按钮执行的业务操作
 * @param {*} type 当前执行操作的类型
 * @param {*} row
 */
const handleLeftBtnAction = (type: string, row: any) => {
  console.info(row);
  leftDetail.value.showDialog(row);
};

/**
 * 增删查按钮执行的业务操作
 * @param {*} type 当前执行操作的类型
 * @param {*} row
 */
const handleRightBtnAction = (type: string, row: any) => {
  rightDetail.value.showDialog(row);
};

//标志为已读
const handleLeftRead = (pks: string[]) => {
  if (pks && pks.length) {
    confirm("你确定要标志为已读吗", async () => {
      const responseData = await postRequest(`system/message/batchRead`, pks);
      if (responseData.code == 200) {
        succMsg(responseData.msg);
        fetchLeftTableData();
      }
    });
  } else {
    failMsg("未选中任何行");
  }
};

//标志为处理
const handleLeftDeal = (pks: string[]) => {
  if (pks && pks.length) {
    confirm("你确定要标志为已处理吗", async () => {
      const responseData = await postRequest(`system/message/batchDeal`, pks);
      if (responseData.code == 200) {
        succMsg(responseData.msg);
        fetchLeftTableData();
      }
    });
  } else {
    failMsg("未选中任何行");
  }
};

//标志为已读
const handleRightRead = (pks: string[]) => {
  if (pks && pks.length) {
    confirm("你确定要标志为已读吗", async () => {
      const responseData = await postRequest(`system/message/batchRead`, pks);
      if (responseData.code == 200) {
        succMsg(responseData.msg);
        fetchRightTableData();
      }
    });
  } else {
    failMsg("未选中任何行");
  }
};

//标志为处理
const handleRightDeal = (pks: string[]) => {
  if (pks && pks.length) {
    confirm("你确定要标志为已处理吗", async () => {
      const responseData = await postRequest(`system/message/batchDeal`, pks);
      if (responseData.code == 200) {
        succMsg(responseData.msg);
        fetchRightTableData();
      }
    });
  } else {
    failMsg("未选中任何行");
  }
};

//跳转处理记录
const onHandleToRoute = (row: any) => {
  router.push({
    name: row.url,
    params: { id: row.bid, isdeal: row.isdeal, backtype: "1" }
  });
};
</script>
